import React from 'react'

import {message, Spin, Empty} from "antd"
import {MessageFilled, EyeFilled} from "@ant-design/icons"
import {getAcgData} from "../../../utils/api/home"

import "./index.scss"

/**
 * ACG图集组件
 */
export default class HomeAcg extends React.Component {
    state = {
        list: [],
        loading: false
    }

    // TODO acg more button
    // 加载更多的点击回调
    moreClickHandler = () => {
        this.setState({loading: true})
        message.info("无更多数据", 1.5, () => {
            this.setState({loading: false})
        })
    }

    // TODO acg articleClick button
    // 文章点击的点击回调
    articleClickHandler = (article) => {
        message.success(`切换文章: ${article}`, 1.5)
        this.props.router.history.push(`/article/${article}`)
    }

    render() {
        return (
            <div className="s-homeacg">
                <div className="s-homeacg-title">
                    <h2 className="title-msg">ACG图集</h2>
                </div>
                <div className="s-homeacg-classify">
                    <div className="s-homeacg-classify-item">
                        <span>全部</span>
                    </div>
                </div>
                <div className="s-homeacg-box">
                    {
                        this.state.list.length > 0 ? (
                            this.state.list.map((item, index) => (
                                <div className="s-homeacg-box-item" key={item.id} onClick={() => this.articleClickHandler(item.article)}>
                                    <div className="item-img">
                                        <img src={item.imgUrl} alt="" />
                                        <div className="img-info">
                                            <span className="info-comment">
                                                <MessageFilled />
                                                &nbsp;
                                                {item.comment}
                                            </span>
                                            <span className="info-look">
                                                <EyeFilled />
                                                &nbsp;
                                                {item.look}
                                            </span>
                                            <span className="info-label">{item.label}</span>
                                        </div>
                                    </div>
                                    <div className="item-title">{item.title}</div>
                                    <div className="item-msg">
                                        <span>{item.time}</span>
                                    </div>
                                </div>
                            ))
                        ) : (
                            <div className="s-homeacg-empty">
                                <h2>请求失败</h2>
                                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
                            </div>
                        )
                    }
                </div>
                <div className="s-homeacg-button" onClick={this.moreClickHandler}>
                    <Spin size="small" spinning={this.state.loading} />
                    <span className="button-more">加载更多</span>
                </div>
            </div>
        )
    }

    async componentDidMount() {

        // 获取数据

        let resp = await getAcgData()
        // console.log(resp)
        this.setState({list: resp})
    }
}
